<!--
 * @Author: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @Date: 2022-05-27 09:06:13
 * @LastEditors: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @LastEditTime: 2022-05-30 21:11:41
 * @FilePath: \vue-2202\src\views\photos\photoinfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="photoinfo">
    <van-panel
      :title="imageInfoList.title"
      :status="`阅读${imageInfoList.click}次`"
    >
      <div class="content">{{ imageInfoList.content }}</div>
      <div class="pic">
        <img
          v-for="(v, i) in thumImagesList"
          :key="v.id"
          width="28%"
          fit="fill"
          v-lazy="v.src"
          @click="toImg(i)"
        />
      </div>
    </van-panel>
    <comment :id="id"></comment>
  </div>
</template>
<script>
import { thumImages, imageInfo } from "@/api";
import { ImagePreview } from "vant";
import Comment from "../../../components/Comment";
export default {
  data() {
    return { thumImagesList: [], imageInfoList: {} };
  },
  props: ["id"],
  methods: {
    async getThumImages() {
      const res = await thumImages(this.id);
      this.thumImagesList = res.data.message;
    },
    async getImageInfo() {
      const res = await imageInfo(this.id);
      this.imageInfoList = res.data.message;
      console.log(this.id);
      console.log(11, this.imageInfoList);
    },
    toImg(id) {
      const images = [];
      this.thumImagesList.forEach((v) => {
        if (v.src) images.push(v.src);
      });
      ImagePreview({
        images,
        startPosition: id,
      });
    },
  },
  created() {
    this.getThumImages();
    this.getImageInfo();
  },
  components: {
    Comment,
  },
};
</script>
<style lang="scss">
.photoinfo {
  .pic {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .content {
    padding: 0 10px;
    text-indent: 40px;
  }
  .van-cell__title {
    font-size: 22px;
    font-weight: 600;
  }
  .van-panel__header-value {
    font-size: 20px;
    font-weight: 500;
  }
}
</style>
